<template>
  <div class="login_bg">
    <transition name="fade">
      <div class="login_box">
        <div class="title">Element-plus-admin</div>
        <div class="form_login_user">
          <el-form 
            hide-required-asterisk 
            :model="state" 
            :rules="rules" 
            ref="loginFormRef" 
            class="demo-ruleForm"
          >
            <el-form-item prop="userName">
              <el-input 
                :prefix-icon="User" 
                v-model="userName" 
                placeholder="用户名/手机号码: admin" 
                autocomplete="off"
              ></el-input>
            </el-form-item>
            <el-form-item prop="passWord">
              <el-input 
                :prefix-icon="Lock" 
                type="password" 
                placeholder="请输入密码: 123456" 
                show-password="true" 
                v-model="passWord" 
                autocomplete="off"
              ></el-input>
            </el-form-item>
            <el-form-item prop="captcha">
              <div class="autoCode_form">
                <el-input :prefix-icon="Setting" v-model="captcha" placeholder="请输入验证码" ></el-input>
                <div class="security_form" v-html='code' @click="resetValidation"></div>
              </div>
            </el-form-item>
            <el-checkbox v-model="isChecked">记住密码</el-checkbox>
            <el-form-item>
              <el-button :loading="loading" class="form_button" round type="primary" @click="submitForm('state')">登 录</el-button>
            </el-form-item>
          </el-form>
        </div>
        <div class="forget_password">
          <a href="">忘记密码</a>
          <a href="">立即注册</a>
        </div>
      </div>
    </transition>
  </div>
</template>

<script setup lang="ts">
import { reactive,toRefs ,ref, onMounted} from "vue";
import { useRouter } from "vue-router"
import {ElMessage} from "element-plus";
import { Lock, User ,Setting} from '@element-plus/icons'
import {login, captchaCode} from "../../../api/user";
const state = reactive({
  userName:"",
  passWord:"",
  captcha:"",
  autoCodeUrl:"",
  isChecked:false,
  loading:false
});
const { userName,passWord,captcha,autoCodeUrl ,isChecked,loading} = toRefs(state)
const router = useRouter();
const loginFormRef = ref<any>(null)
const code = ref('')
const rules = {
  userName: [{ required: true, message: "请输入用户名/手机号码", trigger: "blur" }],
  passWord: [{ required: true, message: "请输入密码", trigger: "blur" }],
  captcha: [{ required: true, message: "请输入验证码", trigger: "blur" }],
}
let arr: string[] = []
for(var i=0;i<25;i++){
  arr.push(String.fromCharCode((65+i)))
}
arr.push(...arr.map(e => e.toLowerCase()))
arr.push(...['0','1','2','3','4','5','6','7','8','9'])



onMounted(() => {
  resetValidation()
  
})



const submitForm = (key:string):void=>{ //登录验证
  loginFormRef.value.validate((valid:any) => {
    if (valid) {
      state.loading = true
      login(state).then((res: any) => {
        state.loading = false
        if(res?.code == 0){
            router.push("/goodsList")
            ElMessage.success("登录成功")
        }
      }).catch(() => {
        state.loading = false
      })
    } else {
      return false
    }
  })
}


const resetValidation = () => { //生成验证码
  captchaCode().catch(e => {
    console.log(e)
    code.value = e
  })
}




</script>

<style scoped lang="less">
  .login_bg{
    width: 100vw;
    height: 100vh;
    background: url("@/assets/loginbg.jpg") no-repeat;
    background-size: cover;
    position: relative;

    .login_box{
      width: 450px;
      height: 450px;
      position: fixed;
      top: 50%;
      right: 10vw;
      transform: translate(0,-50%);
      background: #fff;
      border-radius: 74px;
      box-shadow: #f2f2f2 1px 1px 5px;
      padding: 20px;
      box-sizing: border-box;
    }

    .title{
      height: 60px;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 30px;
      font-weight: bold;
      font-style: italic;
      user-select: none;
    }

    .form_login_user{
      width: 80%;
      margin: 20px auto;
    }


    .autoCode_form{
      display: flex;


      .security_form{
        width: 140px;
        margin-left: 32px;
        height: 38px;
        border-radius: 4px;
        text-align: center;
        letter-spacing: 4px;
        cursor: pointer;
        user-select: none;
      }
    }

    .form_button{
      width: 100%;
    }

    .forget_password{
      display: flex;
      justify-content: space-around;

      >a{
        text-decoration:none
      }
    }
  }
  .fade-enter-active,
  .fade-leave-active {
    transition: opacity 0.5s ease;
  }

  .fade-enter-from,
  .fade-leave-to {
    opacity: 0;
  }
</style>